<template>
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <Left />
      </div>
      <h1 class="title">订单支付</h1>
      <div class="placeholder"></div>
    </div>

    <!-- 订单信息 -->
    <div class="order-section">
      <div class="section-title">订单信息</div>
      <div class="order-info">
        <div class="order-item">
          <span class="label">订单号</span>
          <span class="value">{{ orderInfo.orderNo }}</span>
        </div>
        <div class="order-item">
          <span class="label">下单时间</span>
          <span class="value">{{ orderInfo.createTime }}</span>
        </div>
        <div class="order-item">
          <span class="label">支付金额</span>
          <span class="value price">¥{{ orderInfo.totalAmount }}</span>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="products-section">
      <div class="section-title">商品信息</div>
      <div class="product-list">
        <div 
          class="product-item" 
          v-for="product in orderInfo.products" 
          :key="product.id"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
          </div>
          <div class="product-info">
            <h4 class="product-name">{{ product.name }}</h4>
            <div class="product-spec" v-if="product.selectedSpec">{{ product.selectedSpec }}</div>
            <div class="product-price">
              <span class="price">¥{{ product.price }}</span>
              <span class="quantity">x{{ product.quantity }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-section">
      <div class="section-title">选择支付方式</div>
      <div class="payment-options">
        <div 
          class="payment-option" 
          :class="{ active: selectedPayment === 'wechat' }"
          @click="selectedPayment = 'wechat'"
        >
          <div class="option-info">
            <img src="https://picsum.photos/32/32?random=wechat" alt="微信支付" class="payment-icon" />
            <span class="option-name">微信支付</span>
            <span class="option-desc">推荐使用微信支付</span>
          </div>
          <div class="option-check">
            <nut-checkbox v-model="selectedPayment" value="wechat" />
          </div>
        </div>
        <div 
          class="payment-option" 
          :class="{ active: selectedPayment === 'alipay' }"
          @click="selectedPayment = 'alipay'"
        >
          <div class="option-info">
            <img src="https://picsum.photos/32/32?random=alipay" alt="支付宝" class="payment-icon" />
            <span class="option-name">支付宝</span>
            <span class="option-desc">安全便捷的支付方式</span>
          </div>
          <div class="option-check">
            <nut-checkbox v-model="selectedPayment" value="alipay" />
          </div>
        </div>
        <div 
          class="payment-option" 
          :class="{ active: selectedPayment === 'unionpay' }"
          @click="selectedPayment = 'unionpay'"
        >
          <div class="option-info">
            <img src="https://picsum.photos/32/32?random=unionpay" alt="银联支付" class="payment-icon" />
            <span class="option-name">银联支付</span>
            <span class="option-desc">支持各大银行卡</span>
          </div>
          <div class="option-check">
            <nut-checkbox v-model="selectedPayment" value="unionpay" />
          </div>
        </div>
      </div>
    </div>

    <!-- 支付金额 -->
    <div class="amount-section">
      <div class="section-title">支付金额</div>
      <div class="amount-info">
        <div class="amount-item">
          <span class="label">商品总价</span>
          <span class="value">¥{{ orderInfo.productTotal }}</span>
        </div>
        <div class="amount-item">
          <span class="label">运费</span>
          <span class="value">{{ orderInfo.deliveryFee > 0 ? `¥${orderInfo.deliveryFee}` : '免费' }}</span>
        </div>
        <div class="amount-item" v-if="orderInfo.couponDiscount > 0">
          <span class="label">优惠券</span>
          <span class="value">-¥{{ orderInfo.couponDiscount }}</span>
        </div>
        <div class="amount-item total">
          <span class="label">实付金额</span>
          <span class="value price">¥{{ orderInfo.totalAmount }}</span>
        </div>
      </div>
    </div>

    <!-- 底部支付栏 -->
    <div class="payment-bar">
      <div class="payment-info">
        <div class="payment-amount">
          支付金额: <span class="amount">¥{{ orderInfo.totalAmount }}</span>
        </div>
        <div class="payment-desc">
          请选择支付方式完成支付
        </div>
      </div>
      
      <div class="payment-actions">
        <nut-button 
          type="primary" 
          size="large"
          :disabled="!selectedPayment"
          @click="confirmPayment"
          class="pay-btn"
        >
          立即支付
        </nut-button>
      </div>
    </div>

    <!-- 支付确认弹窗 -->
    <nut-popup v-model:visible="showPaymentConfirm" position="center" :style="{ width: '80%' }">
      <div class="payment-confirm">
        <h3>确认支付</h3>
        <p>确定要使用{{ getPaymentName(selectedPayment) }}支付 ¥{{ orderInfo.totalAmount }} 吗？</p>
        <div class="confirm-actions">
          <nut-button @click="showPaymentConfirm = false">取消</nut-button>
          <nut-button type="primary" @click="processPayment">确认支付</nut-button>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Left } from '@nutui/icons-vue'

const router = useRouter()
const route = useRoute()

// 支付方式
const selectedPayment = ref('wechat')
const showPaymentConfirm = ref(false)

// 订单信息（从路由参数或本地存储获取）
const orderInfo = ref({
  orderNo: 'ENBA' + Date.now(),
  createTime: new Date().toLocaleString(),
  productTotal: 0,
  deliveryFee: 0,
  couponDiscount: 0,
  totalAmount: 0,
  products: []
})

// 获取支付方式名称
const getPaymentName = (paymentType) => {
  const names = {
    wechat: '微信支付',
    alipay: '支付宝',
    unionpay: '银联支付'
  }
  return names[paymentType] || '未知支付方式'
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 确认支付
const confirmPayment = () => {
  if (!selectedPayment.value) {
    showToast('请选择支付方式')
    return
  }
  showPaymentConfirm.value = true
}

// 处理支付
const processPayment = async () => {
  try {
    showToast('正在处理支付...')
    
    // 模拟支付处理
    setTimeout(() => {
      showToast('支付成功！')
      showPaymentConfirm.value = false
      
      // 跳转到支付成功页面或订单详情页
      setTimeout(() => {
        router.push('/order-detail/' + orderInfo.value.orderNo)
      }, 1500)
    }, 2000)
    
  } catch (error) {
    showToast('支付失败，请重试')
    console.error('支付失败:', error)
  }
}

// 显示提示
const showToast = (message) => {
  try {
    if (typeof window !== 'undefined' && window.nutui && window.nutui.showToast) {
      window.nutui.showToast({
        content: message,
        type: 'success',
        duration: 2000
      })
    } else {
      console.log('Toast提示:', message)
    }
  } catch (error) {
    console.log('Toast提示:', message)
  }
}

// 初始化订单信息
const initOrderInfo = () => {
  // 从路由参数获取订单信息
  const orderData = route.params.orderData
  if (orderData) {
    try {
      const decodedData = JSON.parse(decodeURIComponent(orderData))
      orderInfo.value = {
        orderNo: decodedData.orderNo,
        createTime: decodedData.createTime,
        productTotal: decodedData.productTotal,
        deliveryFee: decodedData.deliveryFee,
        couponDiscount: decodedData.couponDiscount,
        totalAmount: decodedData.totalAmount,
        products: decodedData.products
      }
    } catch (error) {
      console.error('解析订单数据失败:', error)
      // 使用默认数据
      useDefaultOrderData()
    }
  } else {
    // 使用默认数据
    useDefaultOrderData()
  }
}

// 使用默认订单数据
const useDefaultOrderData = () => {
  orderInfo.value = {
    orderNo: 'ENBA' + Date.now(),
    createTime: new Date().toLocaleString(),
    productTotal: 299.00,
    deliveryFee: 10.00,
    couponDiscount: 20.00,
    totalAmount: 289.00,
    products: [
      {
        id: 1,
        name: 'iPhone 15 Pro',
        selectedSpec: '256GB 深空黑色',
        price: 299.00,
        quantity: 1,
        image: 'https://picsum.photos/80/80?random=iphone'
      }
    ]
  }
}

onMounted(() => {
  initOrderInfo()
})
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 100px;
}

.header {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.placeholder {
  width: 24px;
}

.order-section,
.products-section,
.payment-section,
.amount-section {
  background: white;
  margin-bottom: 12px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-item .label {
  font-size: 14px;
  color: #666;
}

.order-item .value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.order-item .price {
  color: #ff4757;
  font-weight: 600;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.product-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-spec {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 16px;
  color: #ff4757;
  font-weight: 600;
}

.quantity {
  font-size: 12px;
  color: #999;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-option:hover {
  border-color: #ff4757;
}

.payment-option.active {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.05);
}

.option-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.option-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.option-desc {
  font-size: 12px;
  color: #666;
}

.amount-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.amount-item .label {
  font-size: 14px;
  color: #333;
}

.amount-item .value {
  font-size: 14px;
  color: #333;
}

.amount-item.total {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: 8px;
}

.amount-item.total .label,
.amount-item.total .value {
  font-size: 16px;
  font-weight: 600;
  color: #ff4757;
}

.payment-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-amount {
  font-size: 14px;
  color: #333;
}

.amount {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.payment-desc {
  font-size: 12px;
  color: #666;
}

.pay-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  padding: 0 32px;
}

/* 支付确认弹窗 */
.payment-confirm {
  padding: 20px;
  text-align: center;
}

.payment-confirm h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.payment-confirm p {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-actions .nut-button {
  min-width: 80px;
}
</style>
